import React, { Component } from "react";
import PubSub from "pubsub-js";
import "./index.css";
export default class List extends Component {
  state = {
    users: [], //用户列表
    isFrist: true, //是否首次加载
    isLoading: false, //是否加载中
    isError: false, //是否异常
  };

  // 挂载后生命周期
  componentDidMount() {
    // 订阅消息
    PubSub.subscribe("updateState", (_, stateObj) => {
      this.setState(stateObj);
    });
  }
  render() {
    const { users, isLoading, isError, isFrist } = this.state;
    return (
      <div className="row">
        {isFrist ? (
          <h2>欢迎使用, 请输入搜索项目</h2>
        ) : isLoading ? (
          <h2>Loading...</h2>
        ) : isError ? (
          <h2>请求异常</h2>
        ) : (
          users.map((user) => {
            return (
              <div key={user.id} className="card">
                <a rel="noreferrer" href={user.html_url} target="_blank">
                  <img
                    alt="avator"
                    src={user.avatar_url}
                    style={{ width: "100px" }}
                  />
                </a>
                <p className="card-text">{user.login}</p>
              </div>
            );
          })
        )}
      </div>
    );
  }
}
